<template>
  <div>
    <p>{{state.name}}</p>
    <p>{{state.attr.age}}</p>
    <p>{{state.attr.height}}</p>
    <button @click="myFn">按钮</button>
  </div>
</template>


<script>
/**
 * readonly...
 */
import { readonly, isReadonly, shallowReadonly } from "vue";
import { reactive } from "vue";
import "./components/demo3";
export default {
  name: "App",
  setup() {
    // readonly:用于创建一个只读的数据， 并且递归只读
    // shallowReadonly：用于创建一个只读的数据，但是不是递归可读
    // let state = readonly({ name: "ls", attr: { age: 18, height: 1.88 } });
    let state = shallowReadonly({
      name: "ls",
      attr: { age: 18, height: 1.88 }
    });
    // const 和 readonly 的区别；
    // const:赋值保护，不能给变量重新赋值
    // readonly: 属性保护，不能给属性重新赋值
    // const value = 123;
    // const value = {name:"zs",age:123}
    function myFn() {
      state.name = "测试数据";
      state.attr.age = 16;
      state.attr.height = 1.68;
      console.log(state);
      console.log(isReadonly(state));
    }
    return { state, myFn };
  }
};
</script>
